<template>
  <!-- 新增文章 -->
  <div id="article-add">
    <div class="div-breadcrumb">
      <el-card>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/statistics/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/article/' }">文章管理</el-breadcrumb-item>
                <el-breadcrumb-item>新增文章</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <div class="center-add-form">
      <el-card :body-style="{ padding: '20px'}">
        <el-form :inline="false" :model="addForm" ref="addForm" class="add-form">
          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="addForm.title" placeholder="标题"></el-input>
          </el-form-item>
          <el-form-item label="作者" :label-width="formLabelWidth">
            <el-input v-model="addForm.author" placeholder="作者"></el-input>
          </el-form-item>
          <el-form-item label="封面" :label-width="formLabelWidth">
            <el-input v-model="addForm.cover" placeholder="封面"></el-input>
          </el-form-item>
          <el-form-item label="简介" :label-width="formLabelWidth">
            <el-input v-model="addForm.shortLine" placeholder="简介"></el-input>
          </el-form-item>
          <el-form-item label="分类" :label-width="formLabelWidth">
            <el-select v-model="addForm.categoryId" placeholder="分类">
              <el-option v-for="item in articleCategoryList" :key="item.id" :value="item.id" :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否轮播" :label-width="formLabelWidth">
            <el-select v-model="addForm.isCarousel" placeholder="是否轮播">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否推荐" :label-width="formLabelWidth">
            <el-select v-model="addForm.isRecommend" placeholder="是否推荐">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否原创" :label-width="formLabelWidth">
            <el-select v-model="addForm.isOriginal" placeholder="是否原创">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否置顶" :label-width="formLabelWidth">
            <el-select v-model="addForm.isTop" placeholder="是否置顶">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签" :label-width="formLabelWidth">
            <el-select v-model="addForm.tagIds" multiple placeholder="请选择标签">
              <el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="内容（富文本）" :label-width="formLabelWidth">
            <div>
              <div id="editorElement"></div>
            </div>
          </el-form-item>

          <el-form-item style="text-align: center;">
            <el-button @click="handlerAddCancel()">返 回</el-button>
            <el-button type="primary" @click="handlerAddSubmit()">提 交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>

</template>
<script>
import {
    articleSave,
    articleCategoryQueryList,
    articleTagList
} from '@/api/article'

import {
    Message
} from 'element-ui'
import E from 'wangeditor'

export default {
    name: 'article-add',
    data () {
        return {
            editor: null,
            articleCategoryList: [],
            tagList: [],
            formLabelWidth: '120px',
            addForm: {
                title: null,
                author: null,
                cover: null,
                shortLine: null,
                content: null,
                categoryId: null,
                isCarousel: null,
                isRecommend: null,
                isOriginal: null,
                isTop: null,
                tagIds: null
            }
        }
    },

    methods: {
    // 新增提交
        handlerAddSubmit () {
            let params = {
                title: this.addForm.title,
                author: this.addForm.author,
                shortLine: this.addForm.shortLine,
                cover: this.addForm.cover,
                content: this.editor.txt.html(),
                categoryId: this.addForm.categoryId,
                isCarousel: this.addForm.isCarousel,
                isRecommend: this.addForm.isRecommend,
                isOriginal: this.addForm.isOriginal,
                isTop: this.addForm.isTop,
                tagIds: (this.addForm.tagIds != null && this.addForm.tagIds.length > 0) ? this.addForm.tagIds.join(',')
          : ''
            }
            articleSave(params).then((response) => {
                if (response != null && response.code === 200) {
                    this.addDialogVisible = false
                    this.addForm.title = null
                    this.addForm.author = null
                    this.addForm.cover = null
                    this.addForm.shortLine = null
                    this.addForm.content = null
                    this.addForm.categoryId = null
                    this.addForm.isCarousel = null
                    this.addForm.isRecommend = null
                    this.addForm.isOriginal = null
                    this.addForm.isTop = null
                    this.addForm.tagIds = null
                    this.$router.push('/article')
                    Message.success({
                        message: response.message
                    })
                } else {
                    Message.warning({
                        message: response.message
                    })
                }
                this.editor.destroy()
                this.editor = null
            })
        },
        // 新增取消
        handlerAddCancel () {
            this.addDialogVisible = false
            this.addForm.title = null
            this.addForm.author = null
            this.addForm.cover = null
            this.addForm.shortLine = null
            this.addForm.content = null
            this.addForm.categoryId = null
            this.addForm.isCarousel = null
            this.addForm.isRecommend = null
            this.addForm.isOriginal = null
            this.addForm.isTop = null
            this.addForm.tagIds = null

            this.$router.push('/article')
        },
        initEditor () {
            // 富文本
            // 绑定div上的IDwebsiteEditorElem
            this.editor = new E('#editorElement')
            // 获取输入的内容
            this.editor.config.onchange = (html) => {
                // 打印输入的内容
                // console.log(html);
            }
            // 上传图片到服务器，base64形式
            this.editor.config.uploadImgShowBase64 = true
            // 隐藏网络图片
            this.editor.config.showLinkImg = false
            // 创建一个富文本编辑器
            this.editor.create()
            // 富文本内容
            let text = this.editor.txt.html()
            console.log(text)
        }
    },
    mounted () {
    // 加载文章分类数据
        articleCategoryQueryList({
            enabled: true
        }).then((response) => {
            let data = response.data
            this.articleCategoryList = data
        })
        // 加载标签数据
        articleTagList().then((response) => {
            let data = response.data
            this.tagList = data
        })

        this.initEditor()
    },
    // 销毁编辑器
    beforeDestroy () {
        this.editor.destroy()
        this.editor = null
    }
}
</script>

<style scoped>
#article-add {
  width: auto;
  height: auto;
  background-color: #e9eef3;
}

#editorElement {
  min-height: 300px;
}

.div-breadcrumb {
  margin: 20px 30px 0px 30px;
}

.center-add-form {
  margin: 5px 30px 10px 30px;
}

.el-input {
  width: 300px;
}
</style>
